<template>
  <div class="notepad-root">
    <div class="notepad-titlebar">
      <span class="notepad-icon">📝</span>
      <span class="notepad-title">无标题 - 记事本</span>
      <div class="notepad-actions">
        <button @click="minimize" title="最小化">─</button>
        <button @click="toggleMaximize" title="最大化">□</button>
        <button @click="close" title="关闭">✕</button>
      </div>
    </div>
    <div class="notepad-menubar">
      <div class="menu-item" v-for="menu in menus" :key="menu.label" @mouseenter="openMenu(menu.label)" @mouseleave="closeMenu">
        <span>{{ menu.label }}</span>
        <div class="menu-dropdown" v-if="openMenuLabel===menu.label">
          <div class="dropdown-item" v-for="item in menu.items" :key="item.label" @click="item.action && item.action()">{{ item.label }}</div>
        </div>
      </div>
    </div>
    <div class="notepad-toolbar">
      <button @click="exec('bold')" :class="{active: isActive('bold')}"><b>B</b></button>
      <button @click="exec('italic')" :class="{active: isActive('italic')}"><i>I</i></button>
      <button @click="exec('underline')" :class="{active: isActive('underline')}"><u>U</u></button>
      <select v-model="fontName" @change="exec('fontName', fontName)">
        <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
      </select>
      <select v-model="fontSize" @change="exec('fontSize', fontSize)">
        <option v-for="s in fontSizes" :key="s.value" :value="s.value">{{ s.label }}</option>
      </select>
      <input type="color" v-model="foreColor" @change="exec('foreColor', foreColor)" title="字体颜色" />
      <button @click="exec('justifyLeft')" title="左对齐">⯇</button>
      <button @click="exec('justifyCenter')" title="居中">≡</button>
      <button @click="exec('justifyRight')" title="右对齐">⯈</button>
      <button @click="undo" title="撤销">↶</button>
      <button @click="redo" title="重做">↷</button>
      <button @click="clearContent" title="清空">🗑️</button>
    </div>
    <div class="notepad-editor-wrap">
      <div ref="editor" class="notepad-editor" contenteditable="true" spellcheck="false" @input="onInput" @keydown="onKeydown"></div>
    </div>
    <div class="notepad-statusbar">
      <span>行 {{ line }}, 列 {{ column }}</span>
      <span>100%</span>
      <span>Windows (CRLF)</span>
      <span>UTF-8</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'

const editor = ref(null)
const fontName = ref('微软雅黑')
const fontSize = ref('3')
const foreColor = ref('#000000')
const line = ref(1)
const column = ref(1)

const fonts = ['微软雅黑','宋体','黑体','Arial','Times New Roman','Courier New']
const fontSizes = [
  {label:'8', value:'1'},
  {label:'10', value:'2'},
  {label:'12', value:'3'},
  {label:'14', value:'4'},
  {label:'18', value:'5'},
  {label:'24', value:'6'},
  {label:'36', value:'7'}
]

const menus = [
  { label: '文件', items: [
    { label: '新建', action: clearContent },
    { label: '打开', action: openFile },
    { label: '保存为 TXT', action: saveAsTxt },
    { label: '保存为 HTML', action: saveAsHtml },
  ]},
  { label: '编辑', items: [
    { label: '撤销', action: undo },
    { label: '重做', action: redo },
    { label: '剪切', action: ()=>exec('cut') },
    { label: '复制', action: ()=>exec('copy') },
    { label: '粘贴', action: ()=>exec('paste') },
    { label: '全选', action: ()=>exec('selectAll') },
    { label: '清空', action: clearContent },
  ]},
  { label: '查看', items: [
    { label: '状态栏', action: null },
    { label: '字体', action: null },
  ]},
]

const openMenuLabel = ref(null)
function openMenu(label) { openMenuLabel.value = label }
function closeMenu() { openMenuLabel.value = null }

function exec(cmd, val) {
  document.execCommand(cmd, false, val)
  editor.value && editor.value.focus()
}
function isActive(cmd) {
  return document.queryCommandState(cmd)
}
function undo() { exec('undo') }
function redo() { exec('redo') }
function clearContent() { editor.value.innerHTML = '' }

function saveAsTxt() {
  const text = editor.value.innerText
  const blob = new Blob([text], {type:'text/plain'})
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = 'notepad.txt'
  a.click()
}
function saveAsHtml() {
  const html = editor.value.innerHTML
  const blob = new Blob([html], {type:'text/html'})
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = 'notepad.html'
  a.click()
}
function openFile() {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.txt,.html'
  input.onchange = e => {
    const file = e.target.files[0]
    if (!file) return
    const reader = new FileReader()
    reader.onload = e2 => {
      if (file.name.endsWith('.html')) {
        editor.value.innerHTML = e2.target.result
      } else {
        editor.value.innerText = e2.target.result
      }
    }
    reader.readAsText(file)
  }
  input.click()
}

function onInput(e) {
  updateCursor()
}
function onKeydown(e) {
  if (e.ctrlKey) {
    if (e.key==='b') { e.preventDefault(); exec('bold') }
    if (e.key==='i') { e.preventDefault(); exec('italic') }
    if (e.key==='u') { e.preventDefault(); exec('underline') }
    if (e.key==='z') { e.preventDefault(); undo() }
    if (e.key==='y') { e.preventDefault(); redo() }
    if (e.key==='a') { e.preventDefault(); exec('selectAll') }
  }
  nextTick(updateCursor)
}
function updateCursor() {
  const sel = window.getSelection()
  if (!sel || !sel.anchorNode) return
  let text = editor.value.innerText.slice(0, sel.anchorOffset)
  const lines = text.split('\n')
  line.value = lines.length
  column.value = lines[lines.length-1].length+1
}

// 窗口操作（可选，实际由Window.vue控制）
function minimize() {}
function toggleMaximize() {}
function close() {}

onMounted(()=>{
  editor.value.focus()
})
</script>

<style scoped lang="scss">
$primary: #0078d7;
$border: #e0e0e0;
$toolbar-bg: #f3f6fb;
$editor-bg: #fff;
$shadow: 0 2px 8px #0001;

.notepad-root {
  width: 100%;
  height: 100%;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: $shadow;

  .notepad-titlebar {
    display: flex;
    align-items: center;
    background: $toolbar-bg;
    height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid $border;
    .notepad-icon {
      font-size: 20px;
      margin-right: 8px;
    }
    .notepad-title {
      flex: 1;
      font-size: 15px;
      color: #222;
    }
    .notepad-actions {
      button {
        width: 36px;
        height: 36px;
        background: none;
        border: none;
        font-size: 16px;
        cursor: pointer;
        border-radius: 4px;
        &:hover { background: #e3eefd; }
        &:last-child:hover { background: #e81123; color: #fff; }
      }
    }
  }
  .notepad-menubar {
    display: flex;
    align-items: center;
    background: $editor-bg;
    border-bottom: 1px solid $border;
    height: 32px;
    padding-left: 8px;
    .menu-item {
      position: relative;
      margin-right: 18px;
      font-size: 14px;
      color: #222;
      cursor: pointer;
      &:hover { background: #e3eefd; }
      .menu-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        background: $editor-bg;
        border: 1px solid $border;
        min-width: 90px;
        z-index: 10;
        box-shadow: $shadow;
        .dropdown-item {
          padding: 6px 18px 6px 12px;
          font-size: 14px;
          color: #222;
          cursor: pointer;
          &:hover { background: #e3eefd; }
        }
      }
    }
  }
  .notepad-toolbar {
    display: flex;
    align-items: center;
    background: $toolbar-bg;
    border-bottom: 1px solid $border;
    padding: 4px 10px;
    gap: 8px;
    button, select, input[type="color"] {
      margin-right: 4px;
      font-size: 15px;
      background: none;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 2px 7px;
      cursor: pointer;
      transition: background .2s;
      &:hover, &.active { background: #e3eefd; border-color: $primary; }
    }
    input[type="color"] {
      width: 28px;
      height: 28px;
      padding: 0;
      border: none;
      background: none;
    }
  }
  .notepad-editor-wrap {
    flex: 1;
    background: $editor-bg;
    padding: 0;
    overflow: auto;
    .notepad-editor {
      width: 100%;
      height: 100%;
      min-height: 300px;
      outline: none;
      border: none;
      background: $editor-bg;
      font-size: 16px;
      font-family: inherit;
      padding: 18px 18px 0 18px;
      color: #222;
      resize: none;
      white-space: pre-wrap;
      word-break: break-all;
      overflow-y: auto;
    }
  }
  .notepad-statusbar {
    display: flex;
    align-items: center;
    height: 28px;
    background: $toolbar-bg;
    border-top: 1px solid $border;
    font-size: 13px;
    color: #666;
    padding: 0 12px;
    gap: 18px;
    user-select: none;
  }
}
</style>